<template>
  <div class="sha1-tool">
    <div class="tool-header">
      <h1>SHA1在线加密工具</h1>
      <p>快速进行SHA1哈希加密</p>
    </div>

    <div class="tool-container">
      <el-row :gutter="20">
        <!-- 输入区域 -->
        <el-col :span="12">
          <div class="input-section">
            <div class="section-header">
              <h3>输入内容</h3>
              <div class="actions">
                <el-button @click="clearInput" size="small">清空</el-button>
                <el-button @click="pasteFromClipboard" size="small" type="primary">粘贴</el-button>
              </div>
            </div>
            
            <el-input
              v-model="inputText"
              type="textarea"
              :rows="8"
              placeholder="请输入要加密的文本..."
              @input="handleInput"
            />
            
            <div class="input-actions">
              <el-button 
                type="primary" 
                @click="encrypt"
                :disabled="!inputText.trim()"
                :loading="isProcessing"
              >
                <el-icon><Lock /></el-icon>
                SHA1加密
              </el-button>
            </div>
          </div>
        </el-col>

        <!-- 输出区域 -->
        <el-col :span="12">
          <div class="output-section">
            <div class="section-header">
              <h3>加密结果</h3>
              <div class="actions">
                <el-button @click="copyResult" size="small" :disabled="!outputText">复制</el-button>
                <el-button @click="clearOutput" size="small">清空</el-button>
              </div>
            </div>
            
            <el-input
              v-model="outputText"
              type="textarea"
              :rows="8"
              placeholder="SHA1加密结果将显示在这里..."
              readonly
            />
            
            <div class="output-info" v-if="outputText">
              <el-tag type="info" size="small">
                长度: {{ outputText.length }} 字符
              </el-tag>
              <el-tag type="success" size="small">
                格式: 40位小写
              </el-tag>
            </div>
          </div>
        </el-col>
      </el-row>

      <!-- 示例和说明 -->
      <div class="tool-info">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>使用说明</span>
            </div>
          </template>
          
          <div class="info-content">
            <h4>什么是SHA1？</h4>
            <p>SHA1（Secure Hash Algorithm 1）是一种密码散列函数，可以产生出一个160位（20字节）的哈希值，通常以40位十六进制数表示。</p>
            
            <h4>特点：</h4>
            <ul>
              <li>固定长度：输出都是40位十六进制字符串</li>
              <li>不可逆：无法从SHA1值反推出原始数据</li>
              <li>雪崩效应：输入微小变化会导致输出巨大变化</li>
              <li>比MD5更安全：抗碰撞能力更强</li>
            </ul>
            
            <h4>使用场景：</h4>
            <ul>
              <li>数字证书和SSL/TLS</li>
              <li>Git版本控制系统</li>
              <li>文件完整性校验</li>
              <li>密码存储（已逐渐被SHA256替代）</li>
            </ul>
            
            <h4>示例：</h4>
            <div class="example">
              <p><strong>原文：</strong>Hello World</p>
              <p><strong>SHA1：</strong>0a0a9f2a6772942557ab5355d76af442f8f65e01</p>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Lock } from '@element-plus/icons-vue'

const inputText = ref('')
const outputText = ref('')
const isProcessing = ref(false)

const handleInput = () => {
  // 输入变化时的处理逻辑
}

const encrypt = async () => {
  if (!inputText.value.trim()) {
    ElMessage.warning('请输入要加密的内容')
    return
  }
  
  isProcessing.value = true
  try {
    // 模拟处理延迟
    await new Promise(resolve => setTimeout(resolve, 300))
    
    // 使用crypto-js库进行SHA1加密
    const crypto = await import('crypto-js')
    const sha1Hash = crypto.SHA1(inputText.value).toString()
    outputText.value = sha1Hash
    ElMessage.success('SHA1加密完成')
  } catch (error) {
    ElMessage.error('加密失败：' + error.message)
  } finally {
    isProcessing.value = false
  }
}

const clearInput = () => {
  inputText.value = ''
  ElMessage.info('已清空输入内容')
}

const clearOutput = () => {
  outputText.value = ''
  ElMessage.info('已清空输出结果')
}

const copyResult = async () => {
  if (!outputText.value) {
    ElMessage.warning('没有可复制的内容')
    return
  }
  
  try {
    await navigator.clipboard.writeText(outputText.value)
    ElMessage.success('已复制到剪贴板')
  } catch (error) {
    // 降级方案
    const textArea = document.createElement('textarea')
    textArea.value = outputText.value
    document.body.appendChild(textArea)
    textArea.select()
    document.execCommand('copy')
    document.body.removeChild(textArea)
    ElMessage.success('已复制到剪贴板')
  }
}

const pasteFromClipboard = async () => {
  try {
    const text = await navigator.clipboard.readText()
    inputText.value = text
    ElMessage.success('已粘贴内容')
  } catch (error) {
    ElMessage.error('无法访问剪贴板，请手动粘贴')
  }
}
</script>

<style scoped>
.sha1-tool {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.tool-header {
  text-align: center;
  margin-bottom: 40px;
}

.tool-header h1 {
  font-size: 2.5rem;
  color: #333;
  margin-bottom: 10px;
}

.tool-header p {
  color: #666;
  font-size: 1.1rem;
}

.tool-container {
  margin-bottom: 40px;
}

.input-section,
.output-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid #f0f0f0;
  height: 100%;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-header h3 {
  color: #333;
  margin: 0;
  font-size: 1.3rem;
}

.actions {
  display: flex;
  gap: 8px;
}

.input-actions {
  margin-top: 20px;
  display: flex;
  gap: 12px;
}

.output-info {
  margin-top: 15px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.tool-info {
  margin-top: 40px;
}

.card-header {
  font-weight: bold;
  color: #333;
}

.info-content h4 {
  color: #333;
  margin: 20px 0 10px 0;
  font-size: 1.1rem;
}

.info-content p {
  color: #666;
  line-height: 1.6;
  margin-bottom: 15px;
}

.info-content ul {
  color: #666;
  padding-left: 20px;
  margin-bottom: 15px;
}

.info-content li {
  margin-bottom: 5px;
}

.example {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
  border-left: 4px solid #667eea;
}

.example p {
  margin: 5px 0;
  font-family: 'Courier New', monospace;
}

@media (max-width: 768px) {
  .tool-header h1 {
    font-size: 2rem;
  }
  
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .input-actions {
    flex-direction: column;
  }
  
  .output-info {
    flex-direction: column;
    align-items: flex-start;
  }
}
</style>
